import React from 'react'
import Logo from '../../component/logo/logo'
import {List, InputItem, WingBlank, WhiteSpace, Button} from 'antd-mobile'
import { Navigate } from 'react-router-dom'
import withRouter from '../../component/withRouter'
import {connect} from 'react-redux'
import {login} from '../../redux/user.redux'
import imoocFrom from '../../component/imooc-form/imooc-form'
@withRouter
@connect(
    state=>state.user,
    {login}
)
@imoocFrom
class Login extends React.Component{
    constructor(props) {
        super(props)
        this.register = this.register.bind(this)
        this.handleLogin = this.handleLogin.bind(this)
    }
    register(){
        // console.log(this.props)
        // this.props.history.push('/register')
        this.props.navigate('/register')
    }
    // handleChange(key, val) {
    //     this.setState({
    //         [key]: val
    //     })
    // }
    handleLogin() {
        this.props.login(this.props.state)
    }
    render(h) {
        // console.log(this.props)
        return (
            <div>
                {/* <Hello></Hello> */}
                {(this.props.redirectTo&&this.props.redirectTo!=='/login')? <Navigate to={this.props.redirectTo} />: null}
                <Logo></Logo>
                <h2>登录页</h2>
                <WingBlank>
                    <List>
                        {this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null}
                        <InputItem onChange={v=>this.props.handleChange('user', v)}>用户：</InputItem>
                        {/* <WhiteSpace /> */}
                        <InputItem type='password' onChange={v=>this.props.handleChange('pwd', v)}>密码：</InputItem>
                    </List>
                    <WhiteSpace />
                    <Button onClick={this.handleLogin} type='primary'>登录</Button>
                    <WhiteSpace />
                    <Button onClick={this.register} type='primary'>注册</Button>
                </WingBlank>
            </div>
        )
    }
}

export default Login



// function hello(params) {
//     console.log('hello')
// }
// function WrapperHello(fn) {
//     return function (params) {
//         console.log('before say hello')
//         fn()
//         console.log('after say hello')
//     }
// }
// let hello1 = WrapperHello(hello)
// hello1()
// 1.属性代理
// function WrapperHello(Comp) {
//     class WrapComp extends Comp {
//         componentDidMount() {
//             console.log('高阶组件新增的生命周期，加载完成')
//         }
//         render(h) {
//             return <Comp></Comp>
//         }
//     }
//     // class WrapComp extends React.Component {
//     //     render(h) {
//     //         return (<div>
//     //             <p>this is HOC high order com ele</p>
//     //             <Comp name='text' {...this.props}></Comp>
//     //         </div>)
//     //     }
//     // }
//     return WrapComp
// }
// @WrapperHello
// class Hello extends React.Component {
//     render() {
//         return <h2>Hello there</h2>
//     }
// }
// Hello = WrapperHello(Hello)
// hoc2：反向继承
